{template header_static.html}
<link href="{HOME_THEME_PATH}css/content.css" rel="stylesheet" media="screen" type="text/css">
<link href="{HOME_THEME_PATH}css/mobile.css" rel="stylesheet" media="screen" type="text/css">
<body>
    {template header.html}
    <main class="pro-main">
        <div class="crumbs">
            <?php $neiyebanner=dr_site_value('neiyebanner');?>
            <?php if ($neiyebanner) { $key=0; foreach ($neiyebanner as $v) { ?>
            {if $key==1}
            <div class="banner-img"> 
                <img src="{dr_get_file($v[2])}" width="1920" height="300" class="innerbanners"> 
            </div>
            {/if}
            <?php  $key++; } } ?> 
            <div class="banner-content">
                <div class="l-wrap">
                    <h1 class="banner-title-h1">{usu_fanyi($cat['name'], $language)}</h1>
                    <div class="banner-breadcrumbs"> 
                        <a href='/' class=''>HOME</a>
                        {dr_catpos($catid,'',true," &gt; <a href='[url]' class=''>[name]</a>")}
                    </div>
                </div>
            </div>
        </div>
        <section class="common-main">
            <div class="l-wrap">
                <div class="page-container product">
                    <aside class="sidebar">
                        <div class=" category mod categories">
                            <div class="sidebar-title title">
                                <p>{usu_fanyi('News', $language)}</p>
                            </div>
                            <ul class="sidebar-cate">
                                {category module=share pid=1 return=t}
                                <li class="menu-item LiLevel1 {if $t.id==$catid}active{/if}"> <a href="{if $t.child}javascript:;{else}{dr_url_rel($t.url, SITE_URL)}{/if}">{usu_fanyi($t.name, $language)}</a>
                                    {if $t.child}
                                    <ul class="sub-menu">
                                        {category module=share pid=$t.id return=t2}
                                        <li class="LiLevel2">
                                            <a href="{dr_url_rel($t2.url, SITE_URL)}">{usu_fanyi($t2.name, $language)}</a>
                                        </li>
                                        {/category}
                                    </ul>
                                    {/if}
                                </li>
                                {/category}
                            </ul>
                        </div>
                        <div class=" hotpro mod products">
                            <div class="sidebar-title title">
                                <p>{usu_fanyi('Last News', $language)}</p>
                            </div>
                            <div>
                                <ul class="sidebar-prolist">
                                    {module module=news catid=2 num=0,5}
                                    <li>
                                        <div> 
                                            <a href="{dr_url_rel($t.url, SITE_URL)}" class="img lazy-wrap"> 
                                                <img src="{dr_get_file($t['thumb'])}"  width="110" height="110" alt="{usu_fanyi($t['title'], $language)}"> 
                                            </a>
                                            <div>
                                                <a href="{dr_url_rel($t.url, SITE_URL)}" class="text">
                                                    <p>{usu_fanyi($t['title'], $language)}</p>
                                                </a>
                                            </div>
                                        </div>
                                    </li>
                                    {/module}
                                </ul>
                            </div>
                        </div>
                    </aside>
                    <div class="page-main right-wrap">
                        <h1 class="pro-cate-title title">{usu_fanyi($cat['name'], $language)}</h1>
                        <div class="prolist-content">
                            <p></p>
                        </div>
                        <ul class="pro-list list1">
                            {module module=news catid=$catid page=1}
                            <li>
                                <div class="pro-img"> 
                                    <a href="{dr_url_rel($t.url, SITE_URL)}" class="lazy-wrap" > 
                                        <img data-src="{dr_get_file($t['thumb'])}"
                                            data-sizes="360x0 768w,316x0 1024w,289x0 1280w,288x0 1366w,312x0 1440w,363x0 1600w"
                                            width="380" height="380" class="lazy"
                                            alt="{usu_fanyi($t.title, $language)}"> 
                                            <span class="lazy-load"></span> 
                                    </a>
                                </div>
                                <div class="pro-info"> 
                                    <a class="title" href="{dr_url_rel($t.url, SITE_URL)}">{usu_fanyi($t.title, $language)}</a>
                                    <div class="text">{usu_fanyi($t.description, $language)}</div>
                                    <a class="btn" href="{dr_url_rel($t.url, SITE_URL)}">
                                        {usu_fanyi('read more', $language)}
                                    </a>
                                </div>
                            </li>
                            {/module}

                        </ul>
                        <div class="pages">
                            {$pages}
                        </div>
                        <style>
                            @media(min-width:586px){
                                li{ 
                                list-style: none;
                            }
                            .pages .active{
                                border: 0px ;
                                background:#9f27c6;
                            }
                            .pages .active a{
                                color: #ffffff;
                            }
                            .pages {
                                margin: 40px 0 ; 
                            }
                            .pagination { 
                                display: flex; 
                                align-items: center;
                            }
                            .pagination li:first-child{
                                border: 0px ;
                                background:#9f27c6;
                            }
                            .pagination li:first-child a{
                                color: #ffffff;
                            }
                            .pagination li { 
                                border: 1px solid #ccc;
                                margin: 0 5px; 
                                line-height: 40px;
                            }
                            .pagination li a{ 
                            padding: 10px 15px;
                            line-height: 4px;
                            }
                            .pagination li:hover{ 
                                background:#9f27c6;
                            }
                            .pagination li a:hover{ 
                                color: #ffffff;
                            }
                            }
                            @media(max-width:586px){
                                .pagination li:first-child {  
                                    display: none;  
                                }
                                li{ 
                                    list-style: none;
                                }
                                .pages .active{
                                    border: 0px ;
                                    background:#9f27c6;
                                }
                                .pages .active a{
                                    color: #ffffff;
                                }
                                .pages {
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    margin: 40px 0 ; 
                                }
                                .pagination { 
                                    padding-left:0px ;
                                    display: flex; 
                                    justify-content: center; 
                                    align-items: center;
                                }
                                .pagination li:first-child{
                                    border: 0px ;
                                    background:#9f27c6;
                                }
                                .pagination li:first-child a{
                                    color: #ffffff;
                                }
                                .pagination li { 
                                    border: 1px solid #ccc;
                                    margin: 0 5px; 
                                    line-height: 40px;
                                }
                                .pagination li a{ 
                                padding: 10px 15px;
                                line-height: 4px;
                                }
                                .pagination li:hover{ 
                                    background:#9f27c6;
                                }
                                .pagination li a:hover{ 
                                    color: #ffffff;
                                }
                            }
                        </style>
                    </div>
                </div>
            </div>
        </section>
    </main>
    {template footer.html}
    <script language="javascript" type="text/javascript" src="{HOME_THEME_PATH}js/guestbook.js"></script>
    <link href="{HOME_THEME_PATH}css/guestbook.css" rel="stylesheet" media="screen" type="text/css">
    <script language="javascript" type="text/javascript" src="{HOME_THEME_PATH}js/column.js"></script>
</body>

</html>